<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Button from '@/components/Button.vue'
const router = useRouter()
const token = ref('')
const nav = (name) => {
  router.push({ name })
}
</script>
<template>
  <div class="bg-gray-50 pb-20">
    <div class="max-w-[1200px] mx-auto pt-4 max-[1200px]:p-3">
      <div class="p-5">
        <div class="text-center flex flex-col gap-4">
          <div class="text-4xl max-[750px]:text-3xl">Refer a Friend 🤝 Get Paid 10% 💸</div>
          <div class="text-gray-500">Do You Want to Earn YesCoins For All Your Friends Orders?</div>
          <div class="text-gray-500">Get 10% Comission 💰 on All Your Friends Spend</div>
          <div class="h-0.5 bg-amber-500 w-[10%] mx-auto"></div>
        </div>
      </div>
      <!-- no login -->
      <div class="flex flex-col gap-5 items-center p-10" v-if="!token">
        <div class="text-4xl">Please Login</div>
        <div>
          Please log into your Yesgamers account, then return to this page in order to join our
          referral program.
        </div>
        <Button bg="#f9a044" class="h-13" @click="nav('login')">
          <LockFilled />
          <span>Go to login page</span>
        </Button>
      </div>
      <!-- login but no dabiao -->
      <div class="flex flex-col gap-5 items-center p-10" v-if="token">
        <div class="text-4xl">Our Requirements</div>
        <div class="text-center leading-loose">
          <div>Our current requirements to become a referral are:</div>
          <div class="font-bold">1) Place 5 orders minimum</div>
          <div class="font-bold">2) Purchase value of at least $50 total</div>
          <div>
            Once your account fills these requirements, visit this page again to become a referral.
          </div>
        </div>
        <div class="text-[20px] text-[#8e8e8e]">
          Feeling Like You Meet Our Requirements But Can't Get Your Code?
        </div>
        <Button bg="#f9a044" class="h-13" @click="nav('contact')">
          <SendOutlined />
          <span>Speak to Max</span>
        </Button>
      </div>
      <div class="flex flex-col items-center gap-5">
        <div class="w-[10%] h-0.5 bg-amber-400 mx-auto"></div>
        <div class="text-4xl">Referral FAQ</div>
        <div class="max-w-[900px] mx-auto min-[1200px]:w-[900px]">
          <a-collapse accordion style="background: #fff">
            <template #expandIcon="{ isActive }">
              <caret-right-outlined :rotate="isActive ? 90 : 0" />
            </template>
            <a-collapse-panel key="1" header="Why are some items so expensive?">
              <p class="leading-loose">
                Our prices are determined by supply and demand of the market. Although some items
                may be cheaper at other stores, in the end you get what you pay for. So if you want
                your items to be of the highest quality with the best possible customer service then
                look no further!
              </p>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="Can the items disappear?">
              <p class="leading-loose">
                All items are found by a real player account and are 100% legit. We guarantee and
                promise you that they will never disappear. We know some stores send dupes, but we
                are absolutely safe if you shop with us. We have sold countless items and runes over
                the years and we have not had a single complaint.
              </p>
            </a-collapse-panel>
            <a-collapse-panel
              key="3"
              header="I do not own or do not use the Diablo 2 expansion, Lord of Destruction. Can I still buy and use the items you sell?"
            >
              <p class="leading-loose">
                Simply put, no you cannot. All the items we sell in the store can only be used on
                the Lord of Destruction expansion. However, we are looking at selling items for
                Classic users in the near future! 🙂
              </p>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.ant-collapse-item {
  border-bottom: none !important;
  padding: 6px 0 !important;
}
</style>
